<template>
  <div class="home">
    <header>
      <input type="text" v-model="search" @keydown.enter="scerchBtn" placeholder="回车搜索商品"/>
    </header>
    <div class="count">
      <sidebar :sidList="bigList" @sidCut="cut"></sidebar>
      <grid class="right" :vewList="showList"></grid>
    </div>
  </div>
</template>

<script>
import Grid from "../components/grid.vue";
import Sidebar from "../components/sidebar.vue";
import { ref,reactive,toRefs } from "vue";
import axios from 'axios';
export default {
  name: "Home",
  components: {
    Sidebar,
    Grid,
  },
  setup() {
    const search = ref("");
    const data = reactive({
      allList:[], // 所有分类的数据
      bigList:[], // 大类的数据
      showList:[], // 展示的数据
    })

    axios.post('https://api.it120.cc/small4/shop/goods/category/all').then(res => {
      data.allList = res.data.data;
      data.bigList = data.allList.filter(item => item.level == 1);
      data.bigList.unshift({id:0,name:'所有分类'});
      data.showList = data.allList.filter(item => item.level == 2);
      // console.log(data.bigList);
    })
    const cut = (i) => { // 切换的函数
       let id = data.bigList[i].id; // id 是 0 代表所有二级数据
        if(id == 0){
          data.showList = data.allList.filter(item => item.level == 2);
        } else {
          data.showList = data.allList.filter(item => item.pid == id);
        }
    }

    const scerchBtn = () => { // 回车搜索事件
       data.showList = data.allList.filter(item => item.level == 2 && item.name.includes(search.value));
    }
    
    // let arr = [1,2,3,4,5,6];
    // console.log(arr.includes(10));
      

    return {
      search,
      ...toRefs(data),
      cut,
      scerchBtn
    };
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  .count{
    height: calc(100% - 50px); // calc 动态计算 使用的时候必须 前后都要有空格
    display: flex;
  }
  header {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    input{
      height: 36px;
      border: none;
      background: #e9e9e9;
      border-radius: 36px;
      padding: 0 10px;
      margin-left: 30px;
      width: 200px;
      outline: none;
    }
  }
  .right {
    flex: 1;
    overflow: auto;
  }
}
</style>
